<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseIconBox size="md" shape="full" class="text-gray-400 dark:text-gray-500" bordered>
      <Icon name="ph:popcorn-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-primary-500" bordered>
      <Icon name="ph:presentation-chart-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-lime-500" bordered>
      <Icon name="ph:paint-roller-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-green-500" bordered>
      <Icon name="ph:rocket-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-emerald-500" bordered>
      <Icon name="ph:package-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-teal-500" bordered>
      <Icon name="ph:parachute-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-cyan-500" bordered>
      <Icon name="ph:layout-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-sky-500" bordered>
      <Icon name="ph:infinity-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-blue-500" bordered>
      <Icon name="ph:flask-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-indigo-500" bordered>
      <Icon name="ph:sparkle-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-purple-500" bordered>
      <Icon name="ph:sword-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-fuchsia-500" bordered>
      <Icon name="ph:trophy-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-pink-500" bordered>
      <Icon name="ph:lock-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-rose-500" bordered>
      <Icon name="ph:nut-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-red-500" bordered>
      <Icon name="ph:paw-print-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-orange-500" bordered>
      <Icon name="ph:users-four-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-amber-500" bordered>
      <Icon name="ph:key-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-yellow-500" bordered>
      <Icon name="ph:gear-six-duotone" class="h-5 w-5" />
    </BaseIconBox>

    <BaseIconBox size="md" shape="full" class="text-muted-800 dark:text-muted-500" bordered>
      <Icon name="ph:toilet-paper-duotone" class="h-5 w-5" />
    </BaseIconBox>
  </div>
</template>
